<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.box{
			position: relative;
			width: 80px;
			height: 26px;
			background: #333;
			margin: 20px auto;
			border-radius: 50px;
			box-shadow: "inset 0px 1px 1px rgba(0,0,0,0.5),0px 1px 0px rgba(255,255,255,0.2)";
		}

		/*
		:after 选择器在被选元素的内容后面插入内容。
		请使用 content 属性来指定要插入的内容。
		*/
		.box:after{
			content: 'OFF';
			position: absolute;
			right: 10px;
			z-index: 0;
			color: #000;
			font:12px/26px Arial,sans-serif;
			font-weight: bold;
			text-shadow: 1px 1px 0px rgba(255,255,255,0.15);
		}
		/*
		:before 选择器在被选元素的内容前面插入内容。
		请使用 content 属性来指定要插入的内容。
		*/
		.box:before{
			content: "ON";
			position: absolute;
			left: 10px;
			z-index: 0;
			color: #00bf00;
			font:12px/26px Arial,sans-serif;
			font-weight: bold;
		}
		.box label{
			position: absolute;
			top: 3px;
			left: 3px;
			z-index: 1;
			display: block;
			width: 34px;
			height: 20px;
			cursor: pointer;
			background: #fcfff4;
			/*background: -webkit-linear-gradient(top,#fcfff4 0%,#dfe5df 40%,#b3bead 100%);
			background: -moz-linear-gradient(top,#fcfff4 0%,#dfe5df 40%,#b3bead 100%);
			background: linear-gradient(top,#fcfff4 0%,#dfe5df 40%,#b3bead 100%);*/
			border-radius: 50px;
			/*-webkit-transition:all 0.4s ease;
			-moz-transition:all 0.4s ease;
			-o-transition:all 0.4s ease;
			-ms-transition:all 0.4s ease;*/
			transition:all 0.4s ease;
			box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
		}
		.box input[type=checkbox]{
			visibility: hidden;
		}
		/*
		:checked 选择器匹配每个已被选中的 input 元素（只用于单选按钮和复选框）。
		*/
		.box input[type=checkbox]:checked+label{
			left: 43px;
		}
	</style>
</head>
<body>
	<div class="box">
		<input type="checkbox" id="agree1">
		<label for="agree1"></label>
	</div>
</body>
</html>